import React, { useState } from 'react';
import { Button, Drawer, Form } from 'antd';

import DrawForm from 'components/DrawForm';

import './index.css';
export default function Choreographer() {
  const [visible, setVisible] = useState(true);
  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  const nameValidator = [
    { required: true, message: '请填写此项信息' },
    () => ({
      validator(rule, value) {
        const reg = /^[a-zA-Z\u4e00-\u9fa50-9_-]{0,50}$/;
        if (!reg.test(value)) {
          return Promise.reject(
            '必须只包含中文，字母，下划线，中划线，长度在50个字符以内'
          );
        }
        return Promise.resolve();
      },
    }),
  ];

  const propertyValidator = [
    { required: true, message: '请填写此项信息' },
    () => ({
      validator(rule, value) {
        const reg = /^[a-zA-Z]([a-zA-Z0-9_-]{0,50})$/;
        if (!reg.test(value)) {
          return Promise.reject(
            '只包含字母、数字、下划线、中划线，只能字母开头，长度在50个字符以内'
          );
        }
        return Promise.resolve();
      },
    }),
  ];

  const descValidator = [
    () => ({
      validator(rule, value) {
        if (value && value.length > 255) {
          return Promise.reject('长度限制为255个字符');
        }
        return Promise.resolve();
      },
    }),
  ];

  const allTags = [
    'hash',
    'http',
    'ip',
    '对象操作',
    '工具',
    '手机号',
    '数据处理',
    '文本格式化',
    '日期格式化',
    '编码',
    '解码',
    '计算器',
    '转码',
    '输入检查',
  ].map((item) => ({ id: item, name: item }));
  const basicFormOption = [
    {
      name: '名称',
      labelRequired: true,
      formInputName: 'display',
      rules: nameValidator,
    },
    {
      name: '标识',
      labelRequired: true,
      formInputName: 'name',
      rules: propertyValidator,
    },
    {
      name: '描述',
      formInputName: 'description',
      isTextArea: true,
      rules: descValidator,
    },
    {
      name: '类别',
      formInputName: 'type',
      isSelect: true,
      options: [
        {
          id: 'JavaScript',
          name: 'JavaScript',
        },
        {
          id: 'python',
          name: 'python',
        },
      ],
    },
    {
      name: '标签',
      formInputName: 'tags',
      isTags: true,
      maxTagTextLength: 7,
      maxTagCount: 4,
      options: allTags,
      rules: [
        ({ getFieldValue }) => ({
          validator(rule, value) {
            if (value && value.some((item) => item.length > 10)) {
              return Promise.reject('标签应在10个字符以内');
            }
            if (value && value.length > 4) {
              return Promise.reject('最多添加4个标签');
            }
            return Promise.resolve();
          },
        }),
      ],
    },
  ];

  const paramOptions1 = [
    {
      name: '名称',
      formInputName: 'name',
      required: true,
      rules: [],
    },
    {
      name: '标识',
      formInputName: 'property',
      rules: [],
    },
    {
      name: '类型',
      formInputName: 'type',
      isSelect: true,
      options: [
        {
          id: 'string',
          name: 'string',
        },
        {
          id: 'number',
          name: 'number',
        },
        {
          id: 'int',
          name: 'int',
        },
        {
          id: 'boolean',
          name: 'boolean',
        },
        {
          id: 'array',
          name: 'array',
        },
        {
          id: 'object',
          name: 'object',
        }
      ],
    },
    {
      name: '默认值',
      formInputName: 'default',
    },
    {
      name: '描述',
      formInputName: 'description',
      isTextArea: true,
      rules: descValidator,
    },
  ];
  const paramOptions2 = [
    {
      name: '名称',
      formInputName: 'name',
      required: true,
      rules: [],
    },
    {
      name: '标识',
      formInputName: 'property',
      rules: [],
    },
    {
      name: '类型',
      formInputName: 'type',
      isSelect: true,
      options: [
        {
          id: 'string',
          name: 'string',
        },
        {
          id: 'number',
          name: 'number',
        },
        {
          id: 'int',
          name: 'int',
        },
        {
          id: 'boolean',
          name: 'boolean',
        },
        {
          id: 'array',
          name: 'array',
        },
        {
          id: 'object',
          name: 'object',
        }
      ],
    },

    {
      name: '描述',
      formInputName: 'description',
      isTextArea: true,
      rules: descValidator,
    },
  ];
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="choreographer">
      <Button type="primary" onClick={showDrawer}>
        Open
      </Button>
      <Drawer
        title="脚本配置"
        placement="right"
        mask={false}
        width={425}
        className="choreographer-drawer"
        headerStyle={{
          padding: '9px 24px',
        }}
        onClose={onClose}
        visible={visible}
      >
        <Form autoComplete="off" onFinish={onFinish} onFinishFailed={onFinishFailed}>
          <DrawForm title="基本信息" formItemOptions={basicFormOption} />
          <DrawForm isDynamic name="input"  title="输入"  formItemOptions={paramOptions1} />
          <DrawForm isDynamic name="output"  title="输出"  formItemOptions={paramOptions2} />
          <DrawForm title="高级设置" formItemOptions={basicFormOption} />
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form>
      </Drawer>
    </div>
  );
}
